[Epic]: Where does the user change the language?

[rotterdamdaddy]

Why do we need this functionality?

Hello, I am not able to change the language from English to another language. I need help.

What are we developing?

What are the validation criteria to validate this feature?

What's out of scope for this feature?

Should this feature be feature flagged?

• Feature Flagged

How are we going to code this feature?

Are there any technical decisions made that should be shared?

What is preventing us from delivering this feature?

What can the feature potentially break?

[dosubot]

To change the language in the application, follow these steps:

1. Use the useLanguageHook to access the change method. This allows you to switch languages by passing the desired language object to it.
2. Each language is represented by an object with properties like label, flag, and shortName. For example, to switch to Spanish, find the language object with shortName "es".
3. The change method updates the application's UI to the selected language and saves this preference in localStorage under "selectedLanguage".
4. Here's a code snippet for a language switcher component:

import React from 'react';
import { useLanguageHook, languages } from './path/to/useLanguageHook';

const LanguageSwitcher = () => {
  const { change, currentLanguage } = useLanguageHook();

  const handleLanguageChange = (newLanguageShortName) => {
    const newLanguage = languages.find(lang => lang.shortName === newLanguageShortName);
    if (newLanguage) {
      change(newLanguage);
    }
  };

  return (
    <div>
      <p>Current Language: {currentLanguage?.label}</p>
      <button onClick={() => handleLanguageChange('es')}>Switch to Español</button>
      {/* Add more buttons for other languages as needed */}
    </div>
  );
};

export default LanguageSwitcher;

This component allows users to switch languages, automatically updating the UI and saving the preference for future sessions. Ensure you have the languages array and useLanguageHook properly imported from their respective locations in your project.

Details

Sources

• frontend/public/locales/es/home.json
• frontend/app/user/components/LanguageSelect/hooks/useLanguageHook.ts

About Dosu
This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.

[rotterdamdaddy]

@dosu no I mean when im on the website, the website is already running. but how do I change the language from English to Spanish?

[dosubot]

To change the language from English to Spanish on the website, you can interact with a language switcher component if it's available. This component should be visible on the website, often found in the header, footer, or settings menu. Look for an icon representing a globe, flags, or simply a dropdown menu labeled with the current language or "Language."

Here's a quick guide on how to use such a component:

1. Locate the Language Switcher: It could be labeled with "English", "ES", a flag icon, or even just a globe icon.
2. Select Spanish: Click on the component to open the list of available languages and select "Español" or the flag representing Spain or Spanish-speaking countries.
3. Confirm the Change: The website should automatically update to display content in Spanish.

If the website uses a useLanguageHook or similar functionality, the language preference might be saved in your browser's localStorage, ensuring that your preference is remembered for future visits.

In case you can't find a language switcher on the website, it's possible that the feature might not be implemented or is not easily visible. In such scenarios, reaching out to the website's support or feedback channel might be helpful to request this feature or get assistance on how to access it.

Details

Sources

• frontend/app/user/components/LanguageSelect/hooks/useLanguageHook.ts
• frontend/app/user/components/LanguageSelect/LanguageSelect.tsx

About Dosu
This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.